<template>
    <div class="page">
        <!-- <van-nav-bar class="nav_blue" title="登录" left-arrow @click-left="navBack" /> -->
        <nav-bar title="登录" no-left></nav-bar>

        <div class="login">
            <div class="box_con">
                <!-- <div class="welcome">你好，<br>欢迎来到 信伴客</div> -->
            </div>
            <login-form :formConfig="formConfig" @submit="formSubmit" ref="loginForm">
                <template v-slot:other>
                    <div class="form_sort flex_space_between">
                        <div class="left">
                            <div class="small_tips" v-if="type==1" @click="changeLoginType(2)">验证码登录</div>
                            <div class="small_tips" v-else @click="changeLoginType(1)">账号密码登录</div>
                        </div>
                        <div class="right" v-if="staticInfo.appCode !== 'AGNAPP'">
                            <div class="small_tips" @click="navToRegister">快速注册</div>
                            <div class="v_line mt8"></div>
                            <div class="small_tips" @click="navToResetPwd">忘记密码</div>
                        </div>
                    </div>
                </template>
            </login-form>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import LoginForm from "@/components/form/login-form";
import NoBack from "@/mixin/noBack.js";

const FormConfig1 = {
    tell: {
        show: false,
        lable: "手机号",
        placeholder: "请输入手机号"
    },
    pwd: {
        show: false,
        lable: "密码",
        placeholder: "请输入密码"
    },
    butt: {
        text: "确认"
    }
}

const FormConfig2 = {
    tell: {
        show: false,
        lable: "手机号",
        placeholder: "请输入手机号"
    },
    code: {
        show: false,
        lable: "验证码",
        placeholder: "请输入验证码"
    },
    butt: {
        text: "确认"
    }
}

export default {

    components: { LoginForm },

    mixins: [NoBack],

    data() {
        return {
            type: 1 // 1 账号密码登录， 2 验证码登录
        }
    },

    provide: function () {
        return {
            sendCode: this.sendCode
        }
    },

    mounted() { 
        this.$store.dispatch("logout");
    },

    computed: {
        ...mapState({
            staticInfo: state => state.staticInfo
        }),

        formConfig() {
            if (this.type == 1) {
                return FormConfig1 // 1 账号密码登录
            } else {
                return FormConfig2 // 2 验证码登录
            }
        }
    },

    methods: {
        ...mapMutations({
            setUserInfo: "setUserInfo",
        }),

        // 切换登录方式
        changeLoginType(newType) {
            this.type = newType
        },

        // 快速注册
        navToRegister() {
            this.$router.replace("/register");
        },

        // 重置密码
        navToResetPwd() {
            this.$router.replace("/resetpwd");
        },

        // 发送验证码
        sendCode() {
            let _mobilePhone = this.$refs.loginForm.mobilePhone;
            if (this.$check.start(_mobilePhone, "手机号").isNull().isTell().endShow()) {
                return Promise.resolve(false);
            }
            let params = {
                mobilePhone: _mobilePhone
            }
            return this.$http.smsLogin(params);
        },

        // 登录
        formSubmit(e) {
            if (this.type == 1) { // 1 账号密码登录
                const { mobilePhone, password } = e;
                let params = {
                    mobilePhone: mobilePhone,
                    password: password
                }
                this.$http.loginPWD(params).then(resp => {
                    if (resp === false) {
                        return;
                    }
                    this.saveInfo(resp);
                });
            } else { // 2 验证码登录
                const { mobilePhone, smsCode } = e;
                let params = {
                    mobilePhone: mobilePhone,
                    smsCode: smsCode
                }
                this.$http.loginSMS(params).then(resp => {
                    if (resp === false) {
                        return;
                    }
                    this.saveInfo(resp);
                });
            }
        },

        // 本地状态记录，刷新数据
        saveInfo(data) {
            // 设置用户信息
            this.setUserInfo(data);
            if (data.isModifyPwd) {
                // 退出登陆
                this.$store.dispatch("logout");
                this.$router.push("/resetpwd");
            } else {
                if (this.$config.appCode === "AGNAPP") {
                    this.$store.dispatch("serverUserStatus").then(resp=>{
                        if (resp === false) {
                            this.$toast("服务异常");
                            return resp;
                        } else {
                            this.startInfoVerify(resp);
                        }
                    });
                } else {
                    this.$router.replace("/tabs");
                }
            }
        },
        // 商户进件
        startInfoVerify(data) {
            if (data.certifyStatus == '04') {
                this.$router.replace("/tabs");
                return;
            }
            if (data.userType == '3') { // 3：服务商
                this.$router.push("/collectionInfoverify");
            } else if (data.userType == '4') { // 4：业务员
                this.$router.push("/collectionIdCard");
            } else {
                this.$toast("未知角色");
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    margin: auto;
    padding-top: 20px;

    .welcome {
        font-weight: bold;
        color: #333;
        font-size: 22px;
        line-height: 40px;
        padding: 60px 0 20px 0;
    }

    .form_sort {
        padding: 10px 10px 40px 10px;
        .v_line {
            width: 1px;
            height: 10px;
            display: inline-block;
            border-right: 1px solid #3373f9;
        }

        .small_tips {
            font-size: 14px;
            color: #3373f9;
            display: inline-block;
        }

        .mt8 {
            margin: 0 8px;
        }
    }
}
</style>